import {
  createInbizSchema,
  createBaseSchema,
  createComponentStyleSchema,
  createDecoratorStyleSchema,
  createBizStyleSchema,
  createBizProps,
} from '@inbiz/setters';
import { createBehavior, createResource } from '@inbiz/core';

import { Banner as BannerLocale } from './locale';

export const defaultProps = {
  viewType: 'focus',
  viewType_h5: 'focus',
  autoRoll: true,
  delay: 2,
  showImgTitle: true,
  headerStyle: {
    icon: {
      type: 'icon-jiaodiantupian',
      color: '#000',
    },
  },
  imgWidth: 200,
  imgHeight: 150,
  style: {
    padding: '0px 15px 15px 15px',
  },
};
export const defaultBizProps = {
  MaximumDisplayQuantity: 8,
  displayNum: 4,
};

export const Banner = createInbizSchema({
  attribute: {
    view: {
      type: 'void',
      'x-component': 'CollapseItem',
      properties: {
        'x-component-props': {
          type: 'object',
          properties: {
            viewType: {
              type: 'string',
              enum: ['focus', 'roll', 'detail'],
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              platform: 'web',
            },
            viewType_h5: {
              type: 'string',
              enum: ['focus', 'detail'],
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              platform: 'wap',
            },
          },
        },
      },
    },
    base: {
      type: 'void',
      'x-component': 'CollapseItem',
      properties: {
        title: {
          type: 'object',
          'x-decorator': 'FormItem',
          'x-component': 'StatusInput',
          'x-reactions': [
            {
              dependencies: ['form.attribute.view.x-component-props.viewType'],
              fulfill: {
                schema: {
                  'x-hidden': '{{$deps[0] === "detail"}}',
                },
              },
            },
            {
              dependencies: ['form.attribute.view.x-component-props.viewType_h5'],
              fulfill: {
                schema: {
                  'x-value': {
                    status: '{{$deps[0] == "focus"}}',
                    value: '焦点图片',
                  },
                },
              },
            },
          ],
        },
        'x-display': {
          type: 'string',
          enum: ['visible', 'hidden'],
          'x-decorator': 'FormItem',
          'x-component': 'Select',
          'x-component-props': {
            defaultValue: 'visible',
          },
        },
        'x-component-props': {
          type: 'object',
          properties: {
            detail: {
              type: 'object',
              'x-decorator': 'FormItem',
              'x-component': 'PageSelect',
              'x-reactions': {
                dependencies: ['.viewType', '.viewType_h5'],
                fulfill: {
                  schema: {
                    'x-hidden': '{{$deps[0] === "detail" || $deps[1] === "detail"}}',
                  },
                },
              },
            },
            showImgTitle: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Switch',
              'x-reactions': {
                dependencies: ['.viewType', '.viewType_h5'],
                fulfill: {
                  schema: {
                    'x-hidden': '{{$deps[0] === "detail" || $deps[1] === "detail"}}',
                  },
                },
              },
            },
            autoRoll: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Switch',
              'x-component-props': {
                defaultChecked: true,
              },
              'x-reactions': {
                dependencies: ['.viewType', '.viewType_h5'],
                when: "{{$deps[0] == 'detail' || $deps[1] === 'detail'}}",
                fulfill: {
                  state: {
                    visible: false,
                  },
                },
                otherwise: {
                  state: {
                    visible: true,
                  },
                },
              },
            },
            delay: {
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                formatter: (value: any) => `${value}s`,
                parser: (value: any) => +value.replace('s', ''),
                precision: 1,
                step: 1,
                min: 1,
                defaultValue: 2,
              },
              'x-reactions': {
                dependencies: ['.viewType', '.viewType_h5'],
                when: "{{$deps[0] == 'detail' || $deps[1] == 'detail'}}",
                fulfill: {
                  state: {
                    visible: false,
                  },
                },
                otherwise: {
                  state: {
                    visible: true,
                  },
                },
              },
            },
          },
        },
      },
    },
    ...createBizProps(
      {
        imgCate: {
          type: 'array',
          'x-decorator': 'FormItem',
          'x-component': 'ClassPicker',
          'x-component-props': {
            categoryType: 0,
          },
        },
        displayNum: {
          type: 'number',
          'x-decorator': 'FormItem',
          'x-component': 'NumberPicker',
          'x-component-props': {
            min: 1,
            max: 5,
          },
          'x-reactions': {
            dependencies: ['form.attribute.view.x-component-props.viewType'],
            when: "{{$deps[0] == 'roll'}}",
            fulfill: {
              state: {
                visible: true,
              },
            },
            otherwise: {
              state: {
                visible: false,
              },
            },
          },
        },
        MaximumDisplayQuantity: {
          type: 'number',
          'x-decorator': 'FormItem',
          'x-component': 'Select',
          'x-component-props': {
            min: 1,
            max: 8,
          },
          'x-reactions': {
            dependencies: ['form.attribute.view.x-component-props.viewType_h5'],
            when: "{{$deps[0] == 'focus'}}",
            fulfill: {
              state: {
                visible: true,
              },
            },
            otherwise: {
              state: {
                visible: false,
              },
            },
          },
          enum: ['1', '2', '3', '4', '5', '6', '7', '8'],
        },
      },
      true,
      {
        dependencies: [
          'form.attribute.view.x-component-props.viewType',
          'form.attribute.view.x-component-props.viewType_h5',
        ],
        fulfill: {
          schema: {
            'x-hidden': '{{$deps[0] === "detail" || $deps[1] === "detail"}}',
          },
        },
      },
    ),
  },
  style: {
    ...createComponentStyleSchema({
      imgWidth: {
        type: 'number',
        'x-decorator': 'FormItem',
        'x-component': 'NumberPicker',
        'x-component-props': {
          formatter: (value: any) => `${value}px`,
          parser: (value: any) => +value.replace('px', ''),
          precision: 1,
          step: 1,
          min: 1,
          defaultValue: 200,
        },
        'x-reactions': {
          dependencies: ['.viewType'],
          when: "{{$deps[0] == 'roll'}}",
          fulfill: {
            state: {
              visible: true,
            },
          },
          otherwise: {
            state: {
              visible: false,
            },
          },
        },
      },
      imgHeight: {
        type: 'number',
        'x-decorator': 'FormItem',
        'x-component': 'NumberPicker',
        'x-component-props': {
          formatter: (value: any) => `${value}px`,
          parser: (value: any) => +value.replace('px', ''),
          precision: 1,
          step: 1,
          min: 1,
          defaultValue: 150,
        },
        'x-reactions': {
          dependencies: ['.viewType'],
          when: "{{$deps[0] == 'roll'}}",
          fulfill: {
            state: {
              visible: true,
            },
          },
          otherwise: {
            state: {
              visible: false,
            },
          },
        },
      },
      ...createBizStyleSchema({}, {}, undefined, {
        dependencies: ['.viewType'],
        fulfill: {
          schema: {
            'x-hidden': '{{$deps[0] === "detail"}}',
          },
        },
      }),
    }),
    ...createDecoratorStyleSchema(),
  },
});

export const Behavior = createBehavior({
  name: 'Banner',
  extends: ['Field'],
  selector: (node) => node.props?.['x-component'] === 'Banner',
  designerProps: { propsSchema: Banner },
  designerLocales: BannerLocale,
});

export const Resource = createResource({
  icon: 'Hover',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'sting',
        title: {
          value: 'banner.title',
          status: true,
        },
        'x-decorator': 'Container',
        'x-component': 'Banner',
        'x-component-biz-props': defaultBizProps,
        'x-component-props': defaultProps,
      },
    },
  ],
});
